<h2 class="contentTitle">面板</h2>


<div class="pageContent sortDrag" selector="h1" layoutH="42">

    <div class="panel" defH="150">
        <h1>不可折叠面板1</h1>
        <div>
            <table class="list" width="98%">
                <thead>
                <tr>
                    <th width="80">序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>女</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="panel close collapse" defH="150">
        <h1>可折叠默认关闭面板</h1>
        <div>
            <table class="table" width="98%">
                <thead>
                <tr>
                    <th width="80">序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>女</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="panel collapse" minH="100" defH="150">
        <h1>可折叠默认打开面板</h1>
        <div>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
        </div>
    </div>

    <div id="testDrag" style="border:1px solid red;">test</div>
</div>

<script>

    $.fn.extend({
        divDrag: function (options) {

            return this.each(function () {
                var $box = $(this);
                $box.mousedown(function (event) {
                    var position = $box.position();
                    $box.css({
                        position: 'absolute',
                        top: position.top,
                        left: position.left,
                        width: $box.width() + 'px',
                        height: $box.height() + 'px'
                    }).jDrag({
                        event: event
                    });
                });

            });
        }
    });

    $('#testDrag').divDrag();
</script>